<!--<!doctype html>-->
<!--<html>-->

<!--<head>-->
<!--    <meta charset="utf-8">-->
<!--    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />-->
<!--    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">-->
<!--    <title>录入页面</title>-->
<!--    <link href="../../css/Hui.css" rel="stylesheet" type="text/css" />-->
<!--    <style type="text/css">-->
<!--        /* 新增备注字段样式 */-->
<!--        .remark-box {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            padding: 10px 0;-->
<!--            border-bottom: 1px solid #e5e5e5; /* 统一底部边框样式 */-->
<!--        }-->

<!--        .remark-label {-->
<!--            flex-shrink: 0;-->
<!--            width: 80px; /* 统一标签宽度 */-->
<!--            text-align: right;-->
<!--            padding-right: 10px;-->
<!--            font-size: 16px;-->
<!--            color: #333;-->
<!--        }-->

<!--        .remark-input {-->
<!--            flex-grow: 1;-->
<!--            padding: 12px;-->
<!--            font-size: 16px;-->
<!--            border: none;-->
<!--            outline: none;-->
<!--            background-color: #fff;-->
<!--            resize: vertical; /* 允许垂直调整文本域高度 */-->
<!--        }-->
<!--    </style>-->
<!--</head>-->

<!--<body>-->

<!--<div class="H-padding-vertical-bottom-10"></div>-->
<!--&lt;!&ndash;<header class="H-header H-theme-background-color9 H-padding-vertical-top-25" id="header">&ndash;&gt;-->
<!--&lt;!&ndash;    <span onclick="goBack()" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100">&ndash;&gt;-->
<!--&lt;!&ndash;			<i class="H-iconfont H-icon-target-back H-font-size-18 H-vertical-middle"></i>&ndash;&gt;-->
<!--&lt;!&ndash;		</span>&ndash;&gt;-->
<!--&lt;!&ndash;    <div class="H-header-title H-center-all H-font-size-18 H-text-show-row-1 H-theme-font-color-white&ndash;&gt;-->
<!--&lt;!&ndash;            H-position-absolute H-width-100-percent">录入页面</div>&ndash;&gt;-->
<!--&lt;!&ndash;</header>&ndash;&gt;-->

<!--<div class="H-padding-vertical-bottom-10"></div>-->

<!--<div class="H-border-vertical-both-after">-->
<!--    &lt;!&ndash; 姓名字段 &ndash;&gt;-->
<!--    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">-->
<!--        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;姓名：</span>-->
<!--        <input id="name" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="请输入姓名..." />-->
<!--    </div>-->

<!--    &lt;!&ndash; 手机字段 &ndash;&gt;-->
<!--    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">-->
<!--        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;手机：</span>-->
<!--        <input id="phone" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="请输入手机..." />-->
<!--    </div>-->

<!--    &lt;!&ndash; 商品字段 &ndash;&gt;-->
<!--    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">-->
<!--        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;商品：</span>-->
<!--        <input id="product" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="请输入商品..." />-->
<!--    </div>-->

<!--    &lt;!&ndash; 质保日期字段 &ndash;&gt;-->
<!--    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">-->
<!--        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;质保：</span>-->
<!--        <input id="warrantyDate" type="date" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="请输入质保日期..." />-->
<!--    </div>-->

<!--    &lt;!&ndash; 新增备注字段 &ndash;&gt;-->
<!--    <div class="remark-box">-->
<!--        <span class="remark-label">备注：</span>-->
<!--        <textarea id="remark" class="remark-input" placeholder="请输入备注信息（可选）" rows="3"></textarea>-->
<!--    </div>-->
<!--</div>-->

<!--<div class="H-text-align-center H-margin-vertical-top-15 H-position-relative">-->
<!--    <span onclick="submitForm()" class="H-theme-font-color-red H-font-size-22 H-margin-vertical-bottom-15 H-display-block H-theme-background-color-white H-position-absolute H-padding-vertical-both-10"-->
<!--          style="left:10px;right:10px;top: 100px;">录入</span>-->
<!--</div>-->

<!--<script src="../../script/H.js" type="text/javascript"></script>-->
<!--<script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>-->
<!--<script src="../api.js" type="text/javascript"></script>-->
<!--<script type="text/javascript">-->


<!--    const today = new Date();-->
<!--    const year = today.getFullYear();-->
<!--    const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始-->
<!--    const day = String(today.getDate()).padStart(2, '0');-->

<!--    const formattedDate = `${year}-${month}-${day}`;-->
<!--    document.getElementById('warrantyDate').value = formattedDate;-->


<!--    function submitForm() {-->
<!--        // 获取所有字段值-->
<!--        var name = $('#name').val().trim();-->
<!--        var phone = $('#phone').val().trim();-->
<!--        var product = $('#product').val().trim();-->
<!--        var warrantyDate = $('#warrantyDate').val();-->
<!--        var remark = $('#remark').val().trim(); // 新增备注字段值-->

<!--        // 基础验证（备注为可选字段）-->
<!--        if (name === '') {-->
<!--            alert('请输入姓名');-->
<!--            return false;-->
<!--        }-->
<!--        if (phone === '') {-->
<!--            alert('请输入手机');-->
<!--            return false;-->
<!--        }-->
<!--        if (product === '') {-->
<!--            alert('请输入商品');-->
<!--            return false;-->
<!--        }-->
<!--        if (warrantyDate === '') {-->
<!--            alert('请输入质保日期');-->
<!--            return false;-->
<!--        }-->

<!--        // 这里假设后端接口地址，实际需根据后端提供地址修改-->
<!--        var baseServer = "";-->
<!--        $.ajax({-->
<!--            url: '/zbtProductWty/save',-->
<!--            type: 'POST',-->
<!--            contentType: 'application/json;charset=utf-8',-->
<!--            dataType: "json",-->
<!--            data: JSON.stringify({-->
<!--                username: name,-->
<!--                mobile: phone,-->
<!--                productname: product,-->
<!--                wtyend: warrantyDate,-->
<!--                remark: remark // 发送备注字段到后端-->
<!--            }),-->
<!--            success: function (data) {-->
<!--                debugger-->
<!--                if (data.code === 0) {-->
<!--                    //alert(data.msg);-->
<!--                    alert("录入成功\r\n商家录入后无权修改")-->
<!--                    // 可选：提交成功后清空表单-->
<!--                    $('#name, #phone, #product, #warrantyDate, #remark').val('');-->
<!--                } else {-->
<!--                    alert(data.msg);-->
<!--                }-->
<!--            },-->
<!--            error: function (xhr, type) {-->
<!--                alert('网络错误，请稍后再试');-->
<!--            }-->
<!--        });-->
<!--    }-->
<!--</script>-->

<!--</body>-->

<!--</html>-->


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>录入页面</title>
    <link href="../../css/Hui.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style type="text/css">
        /* 新增备注字段样式 */
        .remark-box {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #e5e5e5; /* 统一底部边框样式 */
        }

        .remark-label {
            flex-shrink: 0;
            width: 80px; /* 统一标签宽度 */
            text-align: right;
            padding-right: 10px;
            font-size: 16px;
            color: #333;
        }

        .remark-input {
            flex-grow: 1;
            padding: 12px;
            font-size: 16px;
            border: none;
            outline: none;
            background-color: #fff;
            resize: vertical; /* 允许垂直调整文本域高度 */
        }

        /* 图片上传区域样式 */
        .upload-container {
            padding: 15px 10px;
            border-bottom: 1px solid #e5e5e5;
        }

        .upload-title {
            margin-bottom: 10px;
            font-size: 16px;
            color: #333;
            padding-left: 10px;
        }

        .upload-box {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .upload-btn {
            width: 50px;
            height: 50px;
            border: 2px dashed #ccc;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .upload-btn:hover {
            border-color: #666;
            color: #666;
        }

        .upload-btn i {
            font-size: 24px;
        }

        .preview-container {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 6px;
            overflow: hidden;
        }

        .preview-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .delete-img {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #ff4d4f;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .file-input {
            display: none;
        }

        .upload-hint {
            margin-top: 10px;
            font-size: 12px;
            color: #999;
            padding-left: 10px;
        }
    </style>
</head>

<body>

<div class="H-padding-vertical-bottom-10"></div>

<div class="H-border-vertical-both-after">
    <!-- 姓名字段 -->
    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">
        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;姓名：</span>
        <input id="name" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="姓名(非必填)" />
    </div>

    <!-- 手机字段 -->
    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">
        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;手机：</span>
        <input id="phone" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="手机号(必填)" />
    </div>

    <!-- 商品字段 -->
    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">
        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;商品：</span>
        <input id="product" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="商品名(必填)" />
    </div>

    <!-- 金额字段 -->
    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">
        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;金额：</span>
        <input id="jine" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="金额(非必填)" />
    </div>

    <!-- 质保日期字段 -->
    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">
        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;质保：</span>
        <input id="warrantyDate" type="date" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="质保日期(必填)" />
    </div>


    <!-- 状态字段 -->
    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">
        <span class="H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">&nbsp;&nbsp;&nbsp;&nbsp;状态：</span>
        <select id="zhuangtai" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="金额(非必填)">
            <option value="正常">正常</option>
            <option value="欠款">欠款</option>
            <option value="其他">其他</option>
<!--            <option>退货</option>-->
<!--            <option>录错</option>-->
        </select>
    </div>

    <!-- 新增图片上传区域 -->
    <div class="upload-container">
<!--        <div class="upload-title">&nbsp;&nbsp;&nbsp;&nbsp;上传图片：</div>-->
        <div class="upload-box" id="uploadBox">
            <div class="upload-btn" id="addImage">
                <i class="fas fa-plus"></i>
            </div>
            <input type="file" id="fileInput" class="file-input" accept="image/*" multiple>
        </div>
        <div class="upload-hint" style="display: none">最多上传3张图片，支持jpg、png格式</div>
    </div>

    <!-- 新增备注字段 -->
    <div class="remark-box">
        <span class="remark-label">备注：</span>
        <textarea id="remark" class="remark-input" placeholder="备注(非必填)" rows="1"></textarea>
    </div>
</div>

<div class="H-text-align-center H-margin-vertical-top-15 H-position-relative">
    <button onclick="submitForm()" id="submitForm" class="H-theme-font-color-red H-font-size-22 H-margin-vertical-bottom-15 H-display-block H-theme-background-color-white H-position-absolute H-padding-vertical-both-10"
          style="left:10px;right:10px;">录入</button>
</div>

<script src="../../script/H.js" type="text/javascript"></script>
<script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="../api.js" type="text/javascript"></script>
<script type="text/javascript">
    // 设置默认日期为今天
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
    const day = String(today.getDate()).padStart(2, '0');
    const formattedDate = `${year}-${month}-${day}`;
    document.getElementById('warrantyDate').value = formattedDate;

    // 图片上传相关变量和事件
    const fileInput = document.getElementById('fileInput');
    const addImageBtn = document.getElementById('addImage');
    const uploadBox = document.getElementById('uploadBox');
    let uploadedImages = []; // 存储已上传的图片文件

    // 点击添加图片按钮触发文件选择
    addImageBtn.addEventListener('click', () => {
        fileInput.click();
    });

    // 处理选择的图片文件
    fileInput.addEventListener('change', (e) => {
        const files = e.target.files;
        if (files && files.length) {
            handleFiles(files);
        }
        // 重置input值，允许重复选择同一文件
        fileInput.value = '';
    });

    // 处理选择的图片文件并显示预览
    function handleFiles(files) {
        // 检查是否超过最大上传数量
        if (uploadedImages.length + files.length > 3) {
            alert('最多只能上传5张图片');
            return;
        }

        for (let i = 0; i < files.length; i++) {
            const file = files[i];

            // 检查文件类型
            if (!file.type.startsWith('image/')) {
                alert('请选择图片文件');
                continue;
            }

            // 检查文件大小（限制5MB以内）
            if (file.size > 10 * 1024 * 1024) {
                alert('图片大小不能超过5MB');
                continue;
            }

            // 读取文件并显示预览
            const reader = new FileReader();
            reader.onload = function(e) {
                const previewContainer = document.createElement('div');
                previewContainer.className = 'preview-container';
                previewContainer.dataset.index = uploadedImages.length;

                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'preview-img';
                img.alt = '预览图';

                const deleteBtn = document.createElement('div');
                deleteBtn.className = 'delete-img';
                deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
                deleteBtn.onclick = function() {
                    const index = parseInt(previewContainer.dataset.index);
                    // 从数组中移除
                    uploadedImages.splice(index, 1);
                    // 从DOM中移除
                    previewContainer.remove();
                    // 更新剩余图片的索引
                    updateImageIndices();
                };

                previewContainer.appendChild(img);
                previewContainer.appendChild(deleteBtn);
                uploadBox.insertBefore(previewContainer, addImageBtn);
                uploadedImages.push(file);
            };
            reader.readAsDataURL(file);
        }
    }

    // 更新图片索引
    function updateImageIndices() {
        const previewContainers = document.querySelectorAll('.preview-container');
        previewContainers.forEach((container, index) => {
            container.dataset.index = index;
        });
    }

    // 表单提交处理
    // function submitForm() {
    //     // 获取所有字段值
    //     var name = $('#name').val().trim();
    //     var phone = $('#phone').val().trim();
    //     var product = $('#product').val().trim();
    //     var warrantyDate = $('#warrantyDate').val();
    //     var remark = $('#remark').val().trim();
    //
    //     var jine = $('#jine').val().trim();
    //     var zhuangtai = $('#zhuangtai').val().trim();
    //     // 基础验证
    //     // if (name === '') {
    //     //     alert('请输入姓名');
    //     //     return false;
    //     // }
    //     if (phone === '') {
    //         alert('请输入手机');
    //         return false;
    //     }
    //     if (product === '') {
    //         alert('请输入商品');
    //         return false;
    //     }
    //     if (warrantyDate === '') {
    //         alert('请输入质保日期');
    //         return false;
    //     }
    //
    //     // 创建FormData对象，用于包含文件和其他表单数据
    //     const formData = new FormData();
    //     formData.append('username', name);
    //     formData.append('mobile', phone);
    //     formData.append('productname', product);
    //     formData.append('wtyend', warrantyDate);
    //     formData.append('remark', remark);
    //
    //     formData.append('jine', jine);
    //     formData.append('zhuangtai', zhuangtai);
    //
    //     // 添加图片文件
    //     uploadedImages.forEach((file, index) => {
    //         formData.append(`images[${index}]`, file);
    //     });
    //
    //     // 发送表单数据（包含图片）到服务器
    //     $.ajax({
    //         url: '/zbtProductWty/save',
    //         type: 'POST',
    //         data: formData,
    //         contentType: false, // 必须设置为false，让浏览器自动设置正确的Content-Type
    //         processData: false, // 必须设置为false，否则jQuery会尝试将FormData转换为字符串
    //         timeout: 300000, // 30秒超时，避免大文件上传被中断
    //         success: function (data) {
    //             if (data.code === 0) {
    //                 alert("录入成功\r\n商家录入后无权修改");
    //                 // 清空表单
    //                 $('#name, #phone, #product, #warrantyDate, #remark, #jine').val('');
    //                 // 清空已上传的图片
    //                 clearImages();
    //             } else {
    //                 alert(data.msg);
    //             }
    //         },
    //         error: function (xhr, type) {
    //             alert('网络错误，请稍后再试');
    //         }
    //     });
    // }


    // 表单提交处理 - 增加防重复提交功能
    function submitForm() {
        // 添加一个状态标记，防止重复提交
      // 标记为正在提交
        event.preventDefault();

        //$("submitForm").disable();
        //$("#submitForm").prop("disabled", true);
        // 同时设置属性和DOM属性
        $("#submitForm").attr("disabled", "disabled").prop("disabled", true);
        $("#submitForm").text("录入中");

        // 获取所有字段值
        var name = $('#name').val().trim();
        var phone = $('#phone').val().trim();
        var product = $('#product').val().trim();
        var warrantyDate = $('#warrantyDate').val();
        var remark = $('#remark').val().trim();

        var jine = $('#jine').val().trim();
        var zhuangtai = $('#zhuangtai').val().trim();

        // 基础验证
        if (phone === '') {
            alert('请输入手机');
            window.isSubmitting = false; // 重置提交状态
            return false;
        }
        if (product === '') {
            alert('请输入商品');
            window.isSubmitting = false; // 重置提交状态
            return false;
        }
        if (warrantyDate === '') {
            alert('请输入质保日期');
            window.isSubmitting = false; // 重置提交状态
            return false;
        }

        // 创建FormData对象，用于包含文件和其他表单数据
        const formData = new FormData();
        formData.append('username', name);
        formData.append('mobile', phone);
        formData.append('productname', product);
        formData.append('wtyend', warrantyDate);
        formData.append('remark', remark);

        formData.append('jine', jine);
        formData.append('zhuangtai', zhuangtai);

        // 添加图片文件
        uploadedImages.forEach((file, index) => {
            formData.append(`images[${index}]`, file);
        });

        // 发送表单数据（包含图片）到服务器
        $.ajax({
            url: '/zbtProductWty/save',
            type: 'POST',
            data: formData,
            contentType: false, // 必须设置为false，让浏览器自动设置正确的Content-Type
            processData: false, // 必须设置为false，否则jQuery会尝试将FormData转换为字符串
            timeout: 300000, // 30秒超时，避免大文件上传被中断
            success: function (data) {
                $("#submitForm").prop("disabled", false);
                $("#submitForm").text("录入");
                if (data.code === 0) {
                    alert("录入成功\r\n商家录入后无权修改");
                    // 清空表单
                    $('#name, #phone, #product, #remark, #jine').val('');
                    // 清空已上传的图片
                    clearImages();
                } else {
                    alert(data.msg);
                }
            },
            error: function (xhr, type) {
                alert('网络错误，请稍后再试');
            },
            complete: function() {

            }
        });
    }


    // 清空已上传的图片
    function clearImages() {
        const previewContainers = document.querySelectorAll('.preview-container');
        previewContainers.forEach(container => container.remove());
        uploadedImages = [];
    }
</script>

</body>

</html>
